<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center xgxq_flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub xgxq_fd0_0_higd'>
					<view class='flex flex-wrap align-center xgxq_fd0_0_c0_higd' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  xgxq_fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='xgxq_fd0_0_c1_c0_higd' v-if=" type=='1'">{{$t('巡更任务详情')}}</text><text
							class='xgxq_fd0_0_c1_c0_higd' v-if=" type=='2'">{{$t('问题详情')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end xgxq_fd0_0_c0_higd'>
						<!-- #ifndef MP-WEIXIN -->
						<text v-if=" type=='1'" class='fu-iconfont2  xgxq_fd0_0_c2_c0_higd'
							@tap.stop="saoFunc">&#xe6e4;</text>
						<!-- #endif -->
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			
			<view class="saomabox flex flex-direction  " v-if="showScanner" @click="showScanner =false">
				<view id="reader" class="scan-container " ></view>
			</view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout">
				<view class='flex flex-direction align-stretch xgxq_fd1_0_higd'>
					<view class='flex flex-direction align-stretch xgxq_fd1_0_c0_higd'>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c0_higd'>
							<text>{{$t('排班名称：')}}</text>
							<text v-if=" type=='1'">{{info.info.pbmc}}</text><text
								v-if=" type=='2'">{{info.info.pbxx_pbmc}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c1_higd'>
							<text class='xgxq_fd1_0_c0_c1_c0_higd'>{{$t('巡更路线')}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{info.info.xglxgl_xglxmc}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c1_higd'>
							<text class='xgxq_fd1_0_c0_c1_c0_higd'>{{$t('巡更时长')}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{info.info.xglxgl_xgsc}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{$t('分钟')}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c1_higd'>
							<text class='xgxq_fd1_0_c0_c1_c0_higd'>{{$t('开始时间')}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{info.info.start_time}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c1_higd'>
							<text class='xgxq_fd1_0_c0_c1_c0_higd'>{{$t('结束时间')}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{info.info.end_time}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c1_higd'>
							<text class='xgxq_fd1_0_c0_c1_c0_higd'>{{$t('巡更方式')}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{info.info.xglxgl_xgfs_name}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c6_higd' v-if=" type=='1'">
							<image class='xgxq_fd1_0_c0_c6_c0_higd' mode="aspectFit" :src='STATIC_URL+"102.png"'
								v-if=" info.info.zxzt=='1'"></image>
							<image class='xgxq_fd1_0_c0_c6_c0_higd' mode="aspectFit" :src='STATIC_URL+"103.png"'
								v-if=" info.info.zxzt=='2'"></image>
							<image class='xgxq_fd1_0_c0_c6_c0_higd' mode="aspectFit" :src='STATIC_URL+"104.png"'
								v-if=" info.info.zxzt=='3'"></image>
							<text class='xgxq_fd1_0_c0_c6_c1_higd' v-if=" info.info.zxzt=='1'">{{$t('待巡更')}}</text><text
								class='xgxq_fd1_0_c0_c6_c1_1_higd' v-if=" info.info.zxzt=='2'">{{$t('巡更中')}}</text><text
								class='xgxq_fd1_0_c0_c6_c1_1_higd' v-if=" info.info.zxzt=='3'">{{$t('已完成')}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c6_higd' v-if=" type=='2'">
							<image class='xgxq_fd1_0_c0_c6_c0_higd' mode="aspectFit" :src='STATIC_URL+"102.png"'
								v-if=" info.info.zg_status=='1'"></image>
							<image class='xgxq_fd1_0_c0_c6_c0_higd' mode="aspectFit" :src='STATIC_URL+"103.png"'
								v-if=" info.info.zg_status=='2'"></image>
							<image class='xgxq_fd1_0_c0_c6_c0_higd' mode="aspectFit" :src='STATIC_URL+"104.png"'
								v-if=" info.info.zg_status=='3'"></image>
							<text class='xgxq_fd1_0_c0_c6_c1_higd'
								v-if=" info.info.zg_status=='1'">{{$t('未整改')}}</text><text
								class='xgxq_fd1_0_c0_c6_c1_1_higd'
								v-if=" info.info.zg_status=='2'">{{$t('整改中')}}</text><text
								class='xgxq_fd1_0_c0_c6_c1_1_higd' v-if=" info.info.zg_status=='3'">{{$t('已完成')}}</text>
						</view>
						<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c1_higd'>
							<text class='xgxq_fd1_0_c0_c1_c0_higd'>{{$t('巡更点数量')}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{info.info.num}}</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>/</text>
							<text class='xgxq_fd1_0_c0_c1_c1_higd'>{{info.info.total_num}}</text>
						</view>
					</view>
				</view>
				<view class='flex flex-direction align-stretch xgxq_fd1_1_higd'>
					<view class='flex flex-wrap align-center xgxq_fd1_1_c0_higd'>
						<text class='xgxq_fd1_1_c0_c0_higd' v-if=" type=='1'">{{$t('巡更点')}}</text>
						<text class='xgxq_fd1_1_c0_c0_higd' v-if=" type=='2'">{{$t('问题整改')}}</text>
						<!-- #ifdef MP-WEIXIN -->
						<text v-if=" type=='1'" class='fu-iconfont2  xgxq_fd0_0_c2_c0_higd'
							style="margin-left: auto;margin-right: 32rpx;" @tap.stop="saoFunc">&#xe6e4;</text>
						<!-- #endif -->
					</view>
					<view class='flex flex-direction align-stretch'>
						<template v-for='(item,key0) in info.list'>
							<view class='flex flex-direction align-stretch xgxq_fd1_1_c1_c0_higd'
								@tap.stop="jumpFunc(item)" :key='key0'>
								<view class='flex flex-wrap align-center justify-between xgxq_fd1_0_c0_c1_higd'>
									<view class='flex flex-wrap align-center'>
										<text>{{item.xgdmc}}</text>
									</view>
									<view class='flex flex-wrap align-center'>
										<view class='flex flex-wrap align-center xgxq_fd1_1_c1_c0_c0_c1_c0_higd'
											v-if=" type=='1'">
											<text class='xgxq_fd1_1_c1_c0_c0_c1_c0_c0_higd'
												v-if=" item.status=='1'">{{$t('未巡更')}}</text><text
												class='xgxq_fd1_1_c1_c0_c0_c1_c0_c0_1_higd'
												v-if=" item.status=='2'">{{$t('已巡更')}}</text>
										</view>
										<view class='flex flex-wrap align-center xgxq_fd1_1_c1_c0_c0_c1_c0_higd'
											v-if=" type=='2'">
											<text class='xgxq_fd1_1_c1_c0_c0_c1_c1_c0_higd'
												v-if=" item.wtzt=='1'">{{$t('待整改')}}</text><text
												class='xgxq_fd1_1_c1_c0_c0_c1_c1_c0_1_higd'
												v-if=" item.wtzt=='2'">{{$t('已完成')}}</text>
										</view>
										<!--     <view   class='flex flex-wrap align-center xgxq_fd1_1_c1_c0_c0_c1_c0_higd'    v-if= " type=='3'"  >
        <text class='xgxq_fd1_1_c1_c0_c0_c1_c2_c0_higd'    v-if= " item.wtzt=='1'"  >{{$t('待审核')}}</text><text class='xgxq_fd1_1_c1_c0_c0_c1_c2_c0_1_higd'    v-if= " item.wtzt=='2'"  >{{$t('已完成')}}</text>
</view>
 --><text class='fu-iconfont2'>&#xe7f2;</text>
									</view>
								</view>
								<view class='flex flex-wrap align-center xgxq_fd1_0_c0_c1_higd'>
									<text class='xgxq_fd1_1_c1_c0_c1_c0_higd'>{{item.address}}</text>
								</view>
							</view>
						</template>

					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<view class="flex flex-wrap align-center justify-center benben-position-layout flex xgxq_flex_2_higd"
				v-if=" type=='1' && info.info.sjkssj==0">
				<button class='xgxq_fd2_0_higd' @tap.stop="cheopenFunc()">{{$t('开始巡更')}}</button>

			</view>
			<view :style="{height: '88rpx'}" v-if=" type=='1' && info.info.sjkssj==0"></view>
			<view class="flex flex-wrap align-center justify-center benben-position-layout flex xgxq_flex_3_higd"
				v-if="type==1&&info.info.num==info.info.total_num &&!info.info.sjjssj">
				<button class='xgxq_fd3_0_higd' @tap.stop="getrx84977fb567e4Func()">{{$t('完成巡更')}}</button>

			</view>
			<view :style="{height: '88rpx'}" v-if="type==1&&info.info.num==info.info.total_num &&!info.info.sjjssj">
			</view>
			<view
				class="flex flex-direction flex-wrap align-center justify-center benben-position-layout flex xgxq_flex_4_higd"
				v-if=" isopen===true" :style="{paddingTop:StatusBarRpx+'rpx', 'height':`100vh`}">
				<view class='flex flex-direction align-stretch xgxq_fd4_0_higd'>
					<view class='flex flex-wrap align-center justify-center xgxq_fd4_0_c0_higd'>
						<text>{{$t('提示')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-center xgxq_fd4_0_c1_higd'>
						<text>{{$t('是否确认开始巡更？开始后请在')}}</text>
						<text>{{info.info.xglxgl_xgsc}}</text>
						<text>{{$t('分钟内完成巡更。')}}</text>
						<text>{{info.info.xglxgl_xgsc}}</text>
						<text>{{$t('分钟后未完成巡更将自动结束巡更。')}}</text>
					</view>
					<view class='flex align-center justify-between xgxq_fd4_0_c2_higd'>
						<button class='xgxq_fd4_0_c2_c0_higd' @tap.stop="isopen=false">{{$t('取消')}}</button>
						<button class='xgxq_fd4_0_c2_c1_higd' @tap.stop="getjl84972fc66500Func()">{{$t('确认')}}</button>
					</view>
				</view>

			</view>


		</view>
	</page-body>
</template>
<script>
	import {
		Html5Qrcode,
		Html5QrcodeSupportedFormats
	} from 'html5-qrcode'
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				/** sjjssj【实际结束巡更时间】
				 *   sjkssj【实际开始巡更时间】
				 *   pbxx_pbmc【排班名称】
				 *   xglxgl_xgfs【巡更方式】 **/
				"info": {
					"xglxgl_xgfs": "",
					"pbxx_pbmc": "",
					/** sjjssj【实际结束巡更时间】
					 *   sjkssj【实际开始巡更时间】
					 *   pbxx_pbmc【排班名称】
					 *   xglxgl_xgfs【巡更方式】 **/
					"info": {
						"xglxgl_xgfs": "",
						"pbxx_pbmc": "",
						"xglxgl_xglxmc": "",
						"xglxgl_xgsc": "",
						"zxzt": "",
						"start_time": "",
						"end_time": "",
						"xglxgl_xgfs_name": "",
						"pbmc": "",
						"total_num": "",
						"num": "",
						"sjkssj": "",
						"sjjssj": ""
					},
					"list": []
				},
				/** status【状态】 **/
				"status": "",
				/** address【巡更地】 **/
				"address": "",
				/** qy【巡更区域】 **/
				"qy": "",
				"aid": "",
				"title": "",
				"isopen": false,
				"id": "1",
				"type": "1",//1 巡更  2整改
				dqxgid: '', //当前待巡更id
				 showScanner: false,
				      html5Qrcode: null
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				type
			} = options
			if (id !== undefined) this.id = id
			if (type !== undefined) this.type = type
			this.getinfoFunc()
			this.diyPageListen()
		},
		onUnload() {
			this.diyOffPageListen()
		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//查询巡更任务详情
			async gette736f54f14ddcFunc() {
				//请求方法
				//数据验证

				let datainfo = await this.$api.get(global.apiUrls.post6736f54f14ddc, {
					aid: this.id
				});

				if (datainfo.data.code != 1) {
					this.$message.info(datainfo.data.msg);
					return
				}
				let infoinfo = datainfo.data;
				this.info = infoinfo.data
				console.log(this.info)
				this.info.list.map(item => {
					console.log(item.status)
					if(item.status == 2){
						this.dqxgid=''
					}
					if (item.status == 1 && !this.dqxgid) {
						this.dqxgid = item.xgdgl_id
					}
				})
					console.log(this.dqxgid)
			},
			//获取数据
			getinfoFunc() {
				if (this.type == '1') {
					this.gette736f54f14ddcFunc()
				} else {
					this.getab73efd4653817Func()
				}
			},
			//查询计划巡更问题详情
			async getab73efd4653817Func() {
				//请求方法
				//数据验证

				let datainfo = await this.$api.get(global.apiUrls.post673efd4653817, {
					pbxx_id: this.id
				});

				if (datainfo.data.code != 1) {
					this.$message.info(datainfo.data.msg);
					return
				}
				let infoinfo = datainfo.data;
				this.info = infoinfo.data

			},
			//跳转页面
			jumpFunc(item) {
				this.status = this.type == 1 ? item.status : item.wtzt
				this.qy = item.address
				this.address = item.xgdmc
				this.aid = this.type == 1 ? item.aid : item.aid
				this.title = this.type == 1 ? this.info.info.pbmc : item.xgdmc
				// if (this.type == 1 && item.xgjg == 1 && item.status == 2) {
				// 	//巡更完正常的
				// 	return
				// }
				console.log(this.aid)
				console.log(this.title)
				console.log(this.qy)
				console.log(this.status)
				console.log(this.address)
				if (this.type == '1') {
					if (this.status == '1') {
						console.log(this.info.info.sjkssj)
						this.$message.info('请扫码巡更')
						return
						this.xg()
						// this.$urouter.navigateTo(
						// 	`/pagexg/xg/xg?id=${this.aid}&address=${this.address}&qy=${this.qy}&title=${this.title}`);
					} else {
						this.aid = item.xgjg_id
						this.$urouter.navigateTo(`/pagexg/xgover/xgover?id=${this.aid}&title=${this.title}`);
					}
				} else if (this.type == '2') {
					// 待整改
					if (this.status == '1') {
						this.$urouter.navigateTo(`/pagexg/xgwtwt/xgwtwt?id=${this.aid}&title=${this.title}`);
					} else {
						// 整改完成
						this.aid = item.aid
						this.$urouter.navigateTo(
							`/pagexg/gzover/gzover?id=${this.aid}&title=${this.title}&ids=${this.aid}`);
					}
				}
			},
			//开始弹框
			cheopenFunc() {
				this.isopen = !this.isopen
			},


			//开始进行巡更
			async getjl84972fc66500Func() {
				//请求方法
				//数据验证

				let data684972fc66500 = await this.$api.post(global.apiUrls.post684972fc66500, {
					pbxx_id: this.id
				});

				if (data684972fc66500.data.code != 1) {
					this.$message.info(data684972fc66500.data.msg);
					return
				}
				let info684972fc66500 = data684972fc66500.data;


				this.isopen = false
				this.getinfoFunc()
			},
			//完成巡更
			async getrx84977fb567e4Func() {
				//请求方法
				//数据验证

				let data684977fb567e4 = await this.$api.post(global.apiUrls.post684977fb567e4, {
					pbxx_id: this.id
				});

				if (data684977fb567e4.data.code != 1) {
					this.$message.info(data684977fb567e4.data.msg);
					return
				}
				let info684977fb567e4 = data684977fb567e4.data;


				this.$urouter.navigateBack(1);
			},
			async saoFunc() {
				if (!this.info.info.sjkssj) {
					this.$message.info('请先点击开始巡更')
					return
				}
				let _this = this
				console.log('扫')
				// this.getxg('256541')
				// this.getxg('7101740')
				// this.getxg('9893340')
				// this.getxg('3781794')
				// return
				if (uni.getSystemInfoSync().uniPlatform == 'web') {
					this.startWebScan()
					return
				}
				
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log(res)
					},
					complete: function(res) {
						uni.showLoading({
							'title': '识别中...'
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
						if (res.result) {
							console.log(res.result)
							console.log(typeof(res.result))
							console.log(JSON.parse(res.result).qrCode)
							let code = JSON.parse(res.result).qrCode
							_this.getxg(code)

						} else {
							setTimeout(function() {
								uni.hideLoading();
							}, 800); 
						}
					},
					fail: function(res) {
						setTimeout(function() {
							uni.hideLoading();
						}, 800);
					}
				})
			},

			 // 初始化扫码器
			    initScanner() {
			      return new Promise((resolve, reject) => {
			        // 确保DOM已更新
			        this.$nextTick(() => {
			          const element = document.getElementById("reader");
			          if (!element) {
			            reject(new Error("扫码容器未找到"));
			            return;
			          }
			          
			          this.html5Qrcode = new Html5Qrcode("reader");
			          resolve();
			        });
			      });
			    },
			    
			    // 开始Web端扫码
			    async startWebScan() {
			      try {
			        // 显示扫码容器
			        this.showScanner = true;
			        
			        // 确保扫码器初始化完成
			        await this.initScanner();
			        
			        const qrCodeSuccessCallback = (decodedText) => {
			          this.handleScanResult(decodedText);
			          this.stopWebScan();
			        };
			        
			        const config = { fps: 10, qrbox: 250 };
			        
			        await this.html5Qrcode.start(
			          { facingMode: "environment" },
			          config,
			          qrCodeSuccessCallback
			        );
			      } catch (err) {
			        console.error("扫码错误:", err);
			        this.stopWebScan();
			        
			        // 回退到模拟扫码
			        if (err.message.includes("NotAllowedError")) {
			          uni.showToast({ title: '请允许摄像头权限', icon: 'none' });
			        } else {
			          // this.showWebScanMock();
			        }
			      }
			    },
			    
			    // 停止Web端扫码
			    stopWebScan() {
			      if (this.html5Qrcode) {
			        this.html5Qrcode.stop().then(() => {
			          this.html5Qrcode.clear();
			          this.showScanner = false;
			        }).catch(err => {
			          console.error("停止扫码失败:", err);
			          this.showScanner = false;
			        });
			      } else {
			        this.showScanner = false;
			      }
			    },
			    
			    // 扫码主方法
			    scanCode() {
			      // #ifdef APP-PLUS
			      uni.scanCode({
			        success: (res) => this.handleScanResult(res.result),
			        fail: (err) => uni.showToast({ title: '扫码失败', icon: 'none' })
			      });
			      // #endif
			      
			      // #ifdef H5
			      this.startWebScan();
			      // #endif
			    },
			    
			    // Web端模拟扫码
			    showWebScanMock() {
			      uni.showModal({
			        title: '模拟扫码',
			        content: '在Web端无法直接扫码，请输入扫码内容',
			        editable: true,
			        success: (res) => {
			          if (res.confirm && res.content) {
			            this.handleScanResult(res.content);
			          } 
			        }
			      });
			    },
			    
			    // 处理扫码结果
			    handleScanResult(result) {
				  let code = JSON.parse(result).qrCode
				   // uni.showToast({ title: `扫码成功: ${code}`, icon: 'none' });
				   this.showScanner=false
				   this.getxg(code)
			      // 这里处理扫码结果逻辑
			    },

			// 获取巡更信息
			async getxg(code) {
				let datalist = await this.$api.get(global.apiUrls.post6852607bcdf61, {
					qr_code: code,
					xglx_id:this.info.info.xglxgl_id,//巡更路线id
					pbxx_id:this.info.info.aid,//排班信息id
				});
				console.log(datalist)
				if (datalist.data.code != 1) {
					this.$message.info(datalist.data.msg);
					return
				}
				let infolist = datalist.data.data;
				console.log(datalist.data)
				if (infolist) {
					if (infolist.is_xungeng == 2) {
						this.$message.info('此巡更点您已巡更完毕')
						return
					}
					console.log(infolist.aid)
					console.log(this.dqxgid)
					console.log(this.info.info.xglxgl_xgfs)
					if (infolist.aid != this.dqxgid && this.info.info.xglxgl_xgfs == 2) {
						this.$message.info('当前巡更任务为有序巡更，请按照顺序进行巡更。')
						return
					}
					this.$urouter.navigateTo(
						`/pagexg/xg/xg?id=${infolist.xgxq_id}&address=${infolist.xgdmc}&qy=${infolist.ldxx_ldmc}&title=${infolist.pbmc}`
						);
				} else {
					uni.showModal({
						title: '此巡更任务不包含此巡更点',
						duration: 3000,
					})

				}
				console.log(infolist)

			},
			//跳转巡更
			xg() {
				this.$urouter.navigateTo(
					`/pagexg/xg/xg?id=${this.aid}&address=${this.address}&qy=${this.qy}&title=${this.title}`);
			},

			//页面监听
			diyPageListen() {
				uni.$on('tjxgzg', (data) => {
					this.getinfoFunc()
				});
				uni.$on('tjxg', (data) => {
					this.getinfoFunc()
				});
			},
			//注销页面监听
			diyOffPageListen() {
				uni.$off('tjxgzg');
				uni.$off('tjxg');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;

		.xgxq_flex_4_higd {
			width: 100%;
			overflow: hidden;
			z-index: 13;
			top: 0rpx;
			background: rgba(238, 238, 238, 0.8);
			background-size: 100% auto;

			.xgxq_fd4_0_higd {
				background: #FFFFFF;
				width: 620rpx;
				height: 519rpx;
				border-radius: 16rpx;

				.xgxq_fd4_0_c0_higd {
					line-height: 88rpx;
					font-size: 36rpx;
					color: #333;
					font-weight: 700;
				}

				.xgxq_fd4_0_c1_higd {
					margin: 44rpx 0rpx auto 0rpx;
					font-size: 32rpx;
				}

				.xgxq_fd4_0_c2_higd {
					padding: 0rpx 32rpx 32rpx 32rpx;

					.xgxq_fd4_0_c2_c0_higd {
						border-radius: 44rpx;
						width: 240rpx;
						line-height: 88rpx;
						font-size: 32rpx;
						background: #FFF1F0;
						color: rgba(211, 42, 41, 1);
						height: 88rpx;
					}

					.xgxq_fd4_0_c2_c1_higd {
						border-radius: 44rpx;
						width: 240rpx;
						line-height: 88rpx;
						font-size: 32rpx;
						background: #D32A29;
						color: #fff;
						height: 88rpx;
					}
				}
			}
		}

		.xgxq_flex_3_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			bottom: calc(88rpx + var(--window-bottom));

			.xgxq_fd3_0_higd {
				border-radius: 33rpx 33rpx 33rpx 33rpx;
				width: 686rpx;
				line-height: 88rpx;
				font-size: 32rpx;
				background: #D32A29;
				color: #fff;
				height: 88rpx;
			}
		}

		.xgxq_flex_2_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			bottom: calc(88rpx + var(--window-bottom));

			.xgxq_fd2_0_higd {
				border-radius: 44rpx;
				width: 686rpx;
				line-height: 88rpx;
				font-size: 32rpx;
				background: #D32A29;
				color: #fff;
				height: 88rpx;
			}
		}

		.xgxq_fd1_0_higd {
			width: 100%;
			padding: 16rpx 32rpx 16rpx 32rpx;

			.xgxq_fd1_0_c0_higd {
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				border-radius: 16rpx;
				padding: 0rpx 24rpx 0rpx 24rpx;
				color: rgba(153, 153, 153, 1);
				font-size: 28rpx;
				position: relative;

				.xgxq_fd1_0_c0_c0_higd {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					margin: 24rpx 0rpx 24rpx 0rpx;
				}
			}
		}

		.xgxq_fd1_0_c0_c1_higd {
			line-height: 64rpx;
		}

		.xgxq_fd1_0_c0_c1_c0_higd {
			width: 170rpx;
		}

		.xgxq_fd1_0_c0_c1_c1_higd {
			color: #333;
		}

		.xgxq_fd1_0_c0_c6_higd {
			position: absolute;
			z-index: 2;
			width: 116rpx;
			height: 48rpx;
			right: 0rpx;
			font-size: 24rpx;
			color: var(--benbenFontColor3);
			text-align: center;
		}

		.xgxq_fd1_0_c0_c6_c0_higd {
			width: 116rpx;
			height: 48rpx;
			border-radius: 0rpx;
			position: absolute;
			right: 0rpx;
		}

		.xgxq_fd1_0_c0_c6_c1_higd {
			position: absolute;
			right: 0rpx;
			z-index: 3;
			width: 116rpx;
			height: 48rpx;
			font-size: 24rpx;
			color: var(--benbenFontColor3);
			text-align: center;
		}

		.xgxq_fd1_0_c0_c6_c1_1_higd {
			position: absolute;
			right: 0rpx;
			z-index: 3;
			width: 116rpx;
			height: 48rpx;
		}

		.xgxq_fd1_1_higd {
			background: rgba(255, 255, 255, 1);
			background-size: 100% auto;
			margin: 0rpx 32rpx 0rpx 32rpx;
			border-radius: 16rpx;

			.xgxq_fd1_1_c0_higd {
				line-height: 64rpx;
				padding: 0rpx 0rpx 0rpx 24rpx;
			}

			.xgxq_fd1_1_c1_c0_higd {
				padding: 0rpx 24rpx 0rpx 24rpx;
				margin: 0rpx 0rpx 32rpx 0rpx;
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				// border-radius: 16rpx;
				border-bottom: 1px solid #eee;
			}
		}

		.xgxq_fd1_1_c0_c0_higd {
			color: #333;
			font-size: 32rpx;
			font-weight: 500;
		}

		.xgxq_fd1_1_c1_c0_c0_c1_c0_higd {
			height: 40rpx;

			.xgxq_fd1_1_c1_c0_c0_c1_c0_c0_higd {
				height: 40rpx;
				line-height: 40rpx;
				color: var(--benbenFontColor6);
				width: 96rpx;
				text-align: center;
				font-size: 24rpx;
				border: 1px solid rgba(255, 140, 0, 1);
				border-radius: 8rpx;
			}

			.xgxq_fd1_1_c1_c0_c0_c1_c0_c0_1_higd {
				color: rgba(255, 255, 255, 1);
				height: 40rpx;
				line-height: 40rpx;
				background: rgba(68, 141, 247, 1);
				background-size: 100% auto;
				width: 96rpx;
				font-size: 24rpx;
				text-align: center;
				border-radius: 8rpx;
			}
		}

		.xgxq_fd1_1_c1_c0_c0_c1_c1_c0_higd {
			line-height: 40rpx;
			height: 40rpx;
			font-size: 24rpx;
			color: var(--benbenFontColor6);
			text-align: center;
			width: 96rpx;
			border: 1px solid var(--benbenbdColor3);
			border-radius: 8rpx;
		}

		.xgxq_fd1_1_c1_c0_c0_c1_c1_c0_1_higd {
			color: rgba(235, 149, 75, 1);
			border: 1px solid rgba(235, 149, 75, 1);
			height: 40rpx;
			line-height: 40rpx;
			width: 96rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 8rpx;
		}

		.xgxq_fd1_1_c1_c0_c0_c1_c2_c0_higd {
			line-height: 40rpx;
			height: 40rpx;
			color: rgba(235, 149, 75, 1);
			font-size: 24rpx;
			text-align: center;
			width: 96rpx;
			border: 1px solid var(--benbenbdColor3);
			border-radius: 8rpx;
		}

		.xgxq_fd1_1_c1_c0_c0_c1_c2_c0_1_higd {
			color: var(--benbenFontColor3);
			height: 40rpx;
			line-height: 40rpx;
			background: rgba(68, 141, 247, 1);
			background-size: 100% auto;
			width: 96rpx;
			font-size: 24rpx;
			text-align: center;
			border-radius: 8rpx;
		}

		.xgxq_fd1_1_c1_c0_c1_c0_higd {
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
		}

		.xgxq_flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.xgxq_fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;
			}
		}

		.xgxq_fd0_0_c0_higd {
			width: 120rpx;

			.xgxq_fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}

		.xgxq_fd0_0_c1_c0_higd {
			font-size: 36rpx;
			font-weight: 700;
			color: #333333;
			line-height: 50rpx;
		}

		.xgxq_fd0_0_c2_c0_higd {
			font-size: 32rpx;
		}
	}
	.saomabox{
		position: fixed;
		width: 100%;
		height: 100%;
		align-items:center;
	
		// justify-content: center;
		z-index: 999;
		background-color: rgba(238, 238, 238, 0.8);
	}
	.scan-container {
	 //  width: 300px;
	 //  height:300px;
	 // // margin: 0 auto;
	 //  border: 1px solid #eee;
	 //  background-color: red;
	 	
	  width: 70vw; /* 宽度为视窗宽度的70% */
	    aspect-ratio: 3/4; /* 关键：保持1:1比例 */
	    max-width: 400px; /* 最大宽度限制 */
	    margin: 20px auto;
	    // border: 2px solid #07C160;
	    border-radius: 8px;
	    overflow: hidden;
	    position: relative;
	    background: black; /* 视频背景为黑色 */
		margin-top: 300rpx;
	}
</style>
